<template>
	<!-- 积分明细 -->
	<view class="PointsDetails">
		<view class="main">
			<view class="title flexjcsa">
				<view class="title-item" v-for="(item,index) in arrTitle" :key="index" @click="switchTab(index)">
					<view :class="num == index ? 'switchStyle' : ''">
						<text>{{item}}</text>
					</view>
				</view>
			</view>
			<view class="content">
				<view class="" v-show="num == 0">
					<whole :arr="arr"></whole>
				</view>
				<view class="" v-show="num == 1">
					<Obtained :arr="arr"></Obtained>
				</view>
				<view class="" v-show="num == 2">
					<consumed :arr="arr"></consumed>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import whole from "../../../pages_my/components/giveServiceTo/integral/whole.vue"
	import Obtained from "../../../pages_my/components/giveServiceTo/integral/Obtained.vue"
	import consumed from "../../../pages_my/components/giveServiceTo/integral/consumed.vue"
	const $api = require('@/utils/request.js').API
	export default {
		components: {
			whole,
			Obtained,
			consumed
		},
		data(){
			return {
				num: 0,
				switchContent: 'whole',
				arrTitle: ['全部','已获取','已消耗'],
				arr: [],
			}
		},
		onLoad() {
			this.accountDetails('all')
		},
		methods: {
			accountDetails(status){
				$api.postAccountDetails({
					account_type: 'point',
					status: status,
				}).then(res => {
					this.arr = res.data.data.list
				})
			},
			// tab切换
			switchTab(index){
				this.num = index
				if(this.num === 0) {
					this.accountDetails('all')
				} else if(this.num === 1) {
					this.accountDetails('acquire')
				} else if(this.num === 2) {
					this.accountDetails('expend')
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.switchStyle {
		height: 77rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #F14500;
		border-bottom: 4rpx solid #F14500;
		border-radius: 2rpx;
		line-height: 77rpx;
		// padding-bottom: 31rpx;
	}
	.PointsDetails {
		.main {
			width: 642rpx;
			margin: auto;
			// 标题
			.title {
				height: 77rpx;
				.title-item {
					width: 132rpx;
					text-align: center;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
				}
			}
			// 内容
			.content {
				
			}
		}
		.whole {
			.main {
				.main-item {
					height: 144rpx;
					background: #FFFFFF;
					// 每条数据的标题
					.main-item-title {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 40rpx;
						padding-bottom: 22rpx;
					}
					// 订单号
					.main-item-OrderNo {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #808080;
						line-height: 40rpx;
					}
					// 积分数
					.main-item-NumberOfPoints {
						text-align: right;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #F14500;
						line-height: 40rpx;
						padding-bottom: 24rpx;
					}
					// 日期时间
					.main-item-dateTrim {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #808080;
						line-height: 40rpx;
						text:first-child {
							padding-right: 20rpx;
						}
					}
				}
			}
		}
	}
</style>